<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/action_link.html">
<link rel="import" href="chrome://resources/html/action_link_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">  
<link rel="import" href="chrome://downloads/browser_proxy.html">
<link rel="import" href="chrome://downloads/constants.html">
<link rel="import" href="chrome://downloads/i18n_setup.html">
<link rel="import" href="chrome://downloads/icons.html">

<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html">
<!-- <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html"> -->


<dom-module id="downloads-login">
    <template>
        <style>
        html,body,span,img,strong,ol,ul,li,p,h3,h2,h3,h4,h5,h6,img,em,area,table,br,hr,table,tr,td,dl,dt,b,dd,form,a,i,input,button{padding:0;margin:0;border:none;outline: none;}
        ul,li,ol{list-style:none;}
        a{text-decoration:none;color: #9aa5b2;}
        h3,h2,h3,h4,h5,h6,em{font-weight:normal;font-style: normal;color: #e6e6e6;}
        body{font-family: "微软雅黑 Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 12px;width: 100vw;background: #e5eaee;color: #666666;}
        div.login img{margin-top: 20px;}
        div.login p{line-height: 20px;}
        .content{ position: fixed;left: 0;top: 0;right: 0;bottom: 0;background: rgba(81, 80, 84, 0.8);}
        /* .content{width: 1280px;overflow: hidden;height: 80vh;margin: 0 auto;position: relative;z-index: 1;}         */
        .content .box{width: 600px;margin:250px auto;height: auto;box-sizing: border-box;border-radius: 10px;box-shadow: 0 0 10px 1px rgba(0,0,0,0.1);background: #ffffff;}        
        .content .box .zhuceBox, .content .box .dengluBox{width: 100%;padding: 0 130px;     margin-top: -50px;   padding-bottom: 50px;box-sizing: border-box;overflow: hidden;}
        .content .box h3{text-align: center;line-height: 80px;color: #2c2c2c;font-size: 20px;padding-top: 20PX}
        .content .box .dengluBox h3{width: 100%;height: 40px;line-height: 40px;position: relative;margin: 20px 0 38px 0;}
     
     
     
        .box .dengluBox h3::after{position: absolute;content: '';display: block;width: 0px;height: 20px;left: 50%;top: 50%;margin-top:0px;border-right: 2px solid #888888;}
        .box .dengluBox h3 span{float:left;width: 50%;font-weight: normal;}
       /* .box .dengluBox h3 span a{color: #2c2c2c;font-size: 20px;} 
        .box .dengluBox h3 span a:hover,.box .dengluBox h3 span a:active{color: #1559d4;} */


        .linkYzDl[status="true"] {color: #1559d4;}
        .linkYzDl[status="false"] {color: #2c2c2c;font-size: 20px;}

        .linkZhDl[status="true"] {color: #1559d4;}
        .linkZhDl[status="false"] {color: #2c2c2c;font-size: 20px;}

     


        .box .zhuceBox .inputBox,.box .dengluBox .inputBox{padding-left: 38px;margin-top: 18px;width: 100%;border-radius: 4px;border: 1px solid #e7e7e7;height: 44px;box-sizing: border-box;line-height: 44px;}
        .box .zhuceBox .phoneBox{padding-left: 88px;}
        .box .zhuceBox .inputBox.phoneBox img{margin: 13px 11px 0 -77px;}
        .box .zhuceBox .verifyBox,.box .dengluBox .verifyBox{padding-right: 100px;}
        .box .zhuceBox .verifyBox input.btnVerify,.box .dengluBox .verifyBox input.btnVerify{width: 100px;margin-right: -100px;cursor: pointer;background: #f5f5f5;color: #bfbfbf;}
        .box .zhuceBox .verifyBox input.btnVerify:hover,.box .dengluBox .verifyBox input.btnVerify:hover{color: #888888;background: #eeeeee;}
        .box .zhuceBox .inputBox img,.box .dengluBox .inputBox img{margin: 13px 11px 0 -27px;float: left;}
        .box .zhuceBox .inputBox select.selPhone{width: 50px;border: 0;outline: none;color: #888888;border-right: 1px solid #e7e7e7;float:left;margin-left: -50px;margin-top: 13px;}
        .box .zhuceBox .inputBox input,.box .dengluBox .inputBox input{color: #666666;font-size: 14px;height: 42px;width: 100%;padding-left: 5px;box-sizing: border-box;float: left;}
        input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color: #cccccc;}
        .box .zhuceBox p input[type=checkBox],.box .dengluBox p input[type=checkBox]{vertical-align: text-top;width: 14px;height: 14px;margin-right: 5px;}
        .box .zhuceBox p span,.box .dengluBox p span{font-size: 14px;line-height: 34px;}
        .box .zhuceBox p ,.box .dengluBox p {text-align: left}
        .box .zhuceBox p a,.box .dengluBox p a{font-size: 14px;line-height: 34px;color: #1559d4;cursor: pointer;}
        .box .dengluBox p a.right{float:right;}
        .box .zhuceBox .btnZhuce,.box .dengluBox .btnDenglu{width: 100%;background: #1559d4;height: 42px;color: #ffffff;border-radius: 4px;margin: 20px auto;cursor: pointer;font-size: 14px;}
        .box .zhuceBox .btnZhuce:hover,.box .dengluBox .btnDenglu:hover{background: #407cec;}
        .box .zhuceBox .btnZhuce:active,.box .dengluBox .btnDenglu:active{background: #124ebc;}
        </style>
            <!-- <iron-ajax
            id="ajax" method="POST" url="" handle-as="json" content-type="application/json" dataType="jsonp"  headers='X-CSRF-Token": "csrfToken' on-response="handleResponse"></iron-ajax>            
            -->            
            <div class="login" on-click="openDialog">
                <template is="dom-if" if="[[isRegist]]">    
                    <img    src="">
                    <p style="font-size:14px;">未登陆</p>
                </template>    
                <template is="dom-if" if="[[!isRegist]]">    
                    <img    src="">
                    <p  style="font-size:14px; color: #565656">admin</p>
                </template>    
            </div>     
            <paper-dialog id="dialog" role="dialog" >
                <div class="content">
                    <div class="box">  
                     <div>   <template is="dom-if" if="[[isFinPwd]]"> <span style="margin-left: 10px;float: left"><img on-click="backLogin"   src=""/></span></template>
                        <span style="float: right"><img  dialog-confirm autofocus  src=""/></span></div>
                        <template  is="dom-if" if="[[isRegist]]">                                    
                            <div class="zhuceBox">
                                <h3>注册洪流账号</h3>                              
                                <form action="" method="post">
                                    <div class="inputBox phoneBox"><img src="" alt=""><select class="selPhone"><option value="+86">+86</option></select><input class="userPhone" type="text" placeholder="手机号码" /></div>
                                    <div class="inputBox verifyBox"><img src="" alt=""><input class="userVerify" type="text" placeholder="请输入手机验证码" /><input class="btnVerify" type="button" value="获取验证码"></div>
                                    <p><input type="checkBox"><span>我同意遵守</span><a herf="javascript:void(0);">《洪流XXX协议》</a></p>
                                    <input type="button" class="btnZhuce" value="注  册">
                                </form>
                                <p class="loginpage" on-click="loginpage"><a class="linkDenglu">登录</a></p>
                            </div>
                        </template>                
                        <template  is="dom-if" if="[[isLoin]]">                                    
                            <div class="dengluBox" >
                                   

                                <h3>
                                    <span on-click="smsLogin"><a  class="linkYzDl" active status$="{{changeSms}}">验证码登录</a></span>
                                    <span on-click="accountLogin"><a  class="linkZhDl" status$={{changePwd}}>登录账号</a></span>
                                </h3>
                                                            
                                <form action="" method="post" >
                                    <!-- 密码登陆 -->
                                <template  is="dom-if" if="[[isPwd]]" >                                    
                                    <div  class="inputBox"><img src="" alt=""><input class="userId" type="text" placeholder="请输入用户名"/></div>
                                    <div  class="inputBox passwordBox"><img src="" alt=""><input class="password" type="password" placeholder="请输入密码"/></div>
                                </template>
                                    <!-- 验证码登陆 -->
                                <template  is="dom-if" if="[[isSms]]" >   
                                    <div  class="inputBox"><img src="" alt=""><input class="userId" type="text" placeholder="请输入手机号"/></div>
                                    <div  class="inputBox verifyBox" ><img src="" alt=""><input class="verify" type="text" placeholder="请输入手机验证码" /><input class="btnVerify" type="button" value="获取验证码"></div>
                                </template>
                                    <p ><input type="checkBox"><span>记住我</span></p>
                                    <input  type="button" class="btnDenglu" value="登  录">
                                </form>
                                <p><a on-click="registerpage" class="linkZhuce">注册</a><a on-click="findPwd" class="right">找回密码</a></p>
                            </div>                        
                        </template>                    

                        <!-- 找回密码 -->
                        <template  is="dom-if" if="[[isFinPwd]]">
                            <div class="zhuceBox">
                                <h3>找回密码</h3>
                                <form action="" method="post">
                                    <div class="inputBox phoneBox"><img src="" alt=""><select class="selPhone"><option value="+86">+86</option></select><input class="userPhone" type="text" placeholder="手机号码" /></div>
                                    <div class="inputBox verifyBox"><img src="" alt=""><input class="userVerify" type="text" placeholder="请输入手机验证码" /><input class="btnVerify" type="button" value="获取验证码"></div>
                                    <div  class="inputBox passwordBox"><img src="" alt=""><input class="password" type="password" placeholder="请输入密码"/></div>
                                    <div  class="inputBox passwordBox"><img src="" alt=""><input class="password" type="password" placeholder="请输入密码"/></div>
                                    <input type="button" class="btnZhuce" value="确定">
                                </form>
                                <!-- <p class="loginpage" on-click="loginpage"><a class="linkDenglu">登录</a></p> -->
                            </div>
                        </template>                        
                    </div>
                </div>        
            </paper-dialog>
    </template>
    <script src="chrome://downloads/login.js"></script>
</dom-module>